<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
    <title>{{ $data->title }}</title>
</head>

<body>
    <div id="app">
        <div class="group_qr_code">
            <img class="img" src="{{ $data->group_qr_code }}">
        </div>

        <div class="footer_btn">
            <van-button type="warning" @click="openDialog()">二维码失效</van-button>
        </div>

        <div class="footer_link">
            <span class="title"><a href="https://omz.fun">由OMZ.FUN提供技术支持</a></span>
        </div>

        <van-dialog class="dialog" v-model:show="showDialog" title="添加微信拉你入群">
            <img class="img" src="{{ $data->wx_qr_code }}" />
        </van-dialog>
    </div>

    <script>
        // 在 #app 标签下渲染一个按钮组件
        let app = Vue.createApp({
            data() {
                return {
                    showDialog: false
                }
            },
            methods: {
                openDialog() {
                    this.showDialog = true
                }
            }
        });
        app.use(vant);
        app.mount("#app");
    </script>
</body>

<style>
    body {
        background-color: rgb(237, 237, 237);
    }

    .group_qr_code {
        width: 100%;
        text-align: center;
    }

    .group_qr_code .img {
        width: 70%;
    }

    .footer_btn {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 80px;
    }

    .dialog .img {
        width: 100%;
    }

    .footer_link {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 5px;
    }

    .footer_link .title {
        font-size: 12px;
        color: #8c8c8c;
    }

    a:link,
    a:active,
    a:visited,
    a:hover {
        color: #8c8c8c;
    }
</style>

</html>